<template>
  <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'originprice', order: 'descending' }">
    <el-table-column label="序号" width="80">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="图片" width="120">
      <template #default="scope">
        <el-image :src="scope.row.img1"></el-image>
      </template>
    </el-table-column>
    <el-table-column label="名称" width="120">
      <template #default="scope">
        <span>{{ scope.row.desc }}</span>
      </template>
    </el-table-column>
    <el-table-column label="品牌" width="80">
      <template #default="scope">
        <span>{{ scope.row.brand }}</span>
      </template>
    </el-table-column>
    <el-table-column label="分类" width="80" prop="category" :filters="filterArr" :filter-method="filterHandler">
      <template #default="scope">
        <span>{{ scope.row.category }}</span>
      </template>
    </el-table-column>
    <el-table-column label="原价" prop="originprice" sortable width="80">
      <template #default="scope">
        <span>{{ scope.row.originprice }}</span>
      </template>
    </el-table-column>
    <el-table-column label="折扣" prop="discount" sortable width="80">
      <template #default="scope">
        <span>{{ scope.row.discount }}</span>
      </template>
    </el-table-column>
    <el-table-column label="销量" prop="sales" sortable width="80">
      <template #default="scope">
        <span>{{ scope.row.sales }}</span>
      </template>
    </el-table-column>
    <el-table-column label="是否售卖" width="80">
      <template #default="scope">
        <el-switch v-model="scope.row.issale" :active-value="1" :inactive-value="0" class="ml-2"
          @click="updateFn(scope.row.proid, 'issale', scope.row.issale)"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
      </template>
    </el-table-column>
    <el-table-column label="是否秒杀" width="80">
      <template #default="scope">
        <el-switch v-model="scope.row.isseckill" :active-value="1" :inactive-value="0"
          @click="updateFn(scope.row.proid, 'isseckill', scope.row.isseckill)" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
      </template>
    </el-table-column>
    <el-table-column label="是否推荐" width="80">
      <template #default="scope">
        <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0" class="ml-2" @click="
          updateFn(scope.row.proid, 'isrecommend', scope.row.isrecommend)
        " style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" v-model:current-page="count" :total="total"
    @current-change="changea" />
</template> 

<script>
import { chanpinlb, tuijian } from "@/api/chanpin.js";
// import { tuijian } from "../../api/chanpin";
export default {
  name: "",
  data() {
    return {
      // currentpage: 1,
      total: 0,
      count: 1,
      limitNum: 10,
      tableData: [],
      filterArr: [],
    };
  },
  created() {
    this.gitlist();
  },
  methods: {
    gitlist() {
      //请求产品列表
      chanpinlb({ count: this.count, limitNum: this.limitNum }).then((res) => {
        console.log("产品列表数据", res);
        this.tableData = res.data.data;
        this.total = res.data.total;
        //将类别筛选出来存到filterArr数组中结构为[{}]
        this.filterArr = this.tableData.map((item) => {
          return item.category;
        });
        this.filterArr = Array.from(new Set(this.filterArr));
        this.filterArr = this.filterArr.map((item) => {
          return { text: item, value: item };
        });
      });
      // tuijian(proid, type, flag).then((res) => {
      //   console.log(res);
      // });
    },
    //删除所用的方法
    handleDelete(index, row) { },
    //分类筛选的方法
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    updateFn(proid, type, flag) {
      console.log(proid, type, flag);
      tuijian({
        proid,
        type,
        flag,
      }).then((res) => {
        console.log(res);
        this.gitlist();
      });
    },
    changea() {
      this.gitlist();
    },
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-scrollbar .cell) {
  height: 90px;
  overflow: hidden;
}
</style>